//导入Mini-css-extract-plugin插件
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
//导入html-webpack-plugin插件
var HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    //打包模式
    mode: 'development',
    // [development]: [开发环境模式], 打包输出的js文件没有压缩的;
    // [production]: [生产环境模式], 打包输出的js文件是压缩的;




    // 配置loader
    module: {
        // loader所有解析规则
        rules: [
            // [ less-loader ]
            {
                // 匹配文件后缀
                test: /\.less$/i,
                use: [
                    // 替代style-loader, 并且将输出的css分离
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    // 将 less 编译成 CSS
                    { loader: 'less-loader' }
                ],
            },

            // [ url-loader ]
            {
                // 匹配文件后缀
                test: /\.(png|jpe?g|gif|webp)$/i,
                use: [{
                    loader: 'url-loader',

                    options: {
                        // 直接输出一个字符串(base64或者图片路径), 而不是输出一个对象
                        esModule: false,

                        // limit 限制base64大小, 
                        // 如果图片大小 大于 limit => 输出 图片路径
                        // 如果图片大小 小于等于 limit => 输出 base64
                        limit: 1024 * 10,
                    }
                }],
                // 模块类型, 在webpack5中兼容后, 可以正常处理css的背景图
                type: 'javascript/auto'
            },

            // [ html-withimg-loader ]
            { // ((html-withimg-loader处理html文件的图片))
                // 匹配文件后缀
                test: /\.html?$/i,

                use: [{ loader: 'html-withimg-loader' }]
            }
        ]
    },




    // 配置插件
    plugins: [
        // 配置HtmlWebpackPlugin插件(打包压缩输出的html文件)
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
            // 三级压缩
            minify: {
                removeComments: true,
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            //使用本地服务器时, html文件输出的文件名必须为index.html
            filename: 'index.html'
        }),
        // 配置MiniCssExtractPlugin插件(分离css插件)
        new MiniCssExtractPlugin({
            filename: 'index.css'
        }),
    ],



    // 配置本地服务器
    devServer: {
        // 服务器地址
        host: '127.0.0.1',
        // 端口
        port: 5000,
        // 监听src文件夹所有文件变化, 浏览器自动重新加载, 不需要手动刷新浏览器
        // (./src/**/* ===> src文件夹里面的 **所有重 的 *所有文件)
        watchFiles: ['./src/**/*'],
        // 启动服务器后自动打开浏览器
        open: true

    }
}
